<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Score</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script src="/static/chart/highcharts.js"></script>
</head>
<body>
<h3>查看{{ student.username }}成绩</h3>
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-1">
                <table class="table-bordered table table-stripped">
                <thead>
                <tr>
                    <th>班级</th>
                    <th>班主任</th>
                    <th>任课老师</th>
                    <th>课程成绩</th>
                </tr>
                </thead>
                <tbody>
                {% for class in class_list %}

                    <tr>
                        <td>{{ class }}</td>
                        <td>{{ class.tutor }}</td>
                        <td>
                            {% for teacher in class.teachers.all %}
                                <span>{{ teacher }},</span>
                            {% endfor %}
                        </td>
                    <td>
                        <a class="check_chart" class-id="{{ class.pk }}"><span>点击查看</span></a>
                    </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="container" style="width: 600px; height: 400px" class="col-md-offset-3"></div>
<script>
    $(".check_chart").click(function () {
        $.ajax({
            url: "",
            type: "get",
            data: {
                student_id: "{{ student.pk }}",
                class_id: $(this).attr("class-id")
            },
            success: function (data) {

                // 显示柱状图
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '查看成绩'
                    },
                    subtitle: {
                        text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            rotation: -45  // 设置轴标签旋转角度
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '分数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '分数: <b>{point.y:.2f}</b>'
                    },
                    series: [{
                        name: '总人口',
                        data: data,
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                            y: 10
                        }
                    }]
                });
            }
        })
    })
</script>
</body>
</html>